<template>
  <div class="flex flex-col gap-3 px-3 bg-white h-[780px]">
    <div class="p-[2px] rounded-lg bg-gradient-to-r from-[#FFF6FF] to-[#F0F8FF] w-full">
      <div class="rounded-lg bg-[#FBFDFF] w-full h-full">
        <div class="flex flex-row justify-between items-end gap-1 p-4">
          <div class="flex flex-row items-center gap-1 font-bold">
            <div
              class="w-1 h-4 rounded-full bg-gradient-to-b from-[#C778FF] to-[#76A2FF]"
            />
            销售能力画像
          </div>

          <div class="flex flex-row items-center gap-1">
            <div class="flex flex-row items-center mb-[2px] text-[#8C8C8C] text-xs">
              能力评估得分
              <el-tooltip
                content="各能力评估维度得分之和 / 能力评估维度数"
                trigger="click"
                placement="top"
              >
                <van-icon name="question-o" color="#BFBFBF" />
              </el-tooltip>
            </div>

            <div
              class="flex flex-row items-center mb-[2px] text-[#8C8C8C] text-xs gap-[2px]"
            >
              <p class="text-[#52C41A]">{{ source.toFixed(0) }}分</p>
              <p>|</p>
              <p>达标值</p>
              <p class="text-[#262626]">{{ abilityStandardScore }}分</p>
            </div>
          </div>
        </div>
        <div class="w-full">
          <RadarChart :data="assessmentData" />
        </div>
      </div>
    </div>

    <div class="p-[2px] rounded-lg bg-gradient-to-r from-[#FFF6FF] to-[#F0F8FF] w-full">
      <div class="rounded-lg bg-[#FBFDFF] w-full h-full">
        <div class="flex flex-row items-end gap-1 p-4">
          <div class="flex flex-row items-center gap-1 font-bold">
            <div
              class="w-1 h-4 rounded-full bg-gradient-to-b from-[#C778FF] to-[#76A2FF]"
            />
            能力评估详情
          </div>

          <div class="flex flex-row items-center gap-1">
            <div class="flex flex-row items-center mb-[2px] text-[#8C8C8C] text-xs"></div>
          </div>
        </div>
        <div class="w-full">
          <CircleChart v-if="userReportData.length > 0" :data="userReportData" />
        </div>
      </div>

      <AIGeneratedTip class="my-2" />
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  getUserAssessment,
  getUserReport,
  ReportDataType,
  UserAssessmentParams,
} from "@/services/myXmate";
import { computed, defineProps, nextTick, onMounted, ref } from "vue";
import RadarChart from "@/components/charts/radarChart.vue";
import CircleChart from "@/components/charts/circleChart.vue";
import AIGeneratedTip from "@/components/AIGeneratedTip.vue";
import { getUserInfo } from "@/utils/auth";
import { useMyXmateStore } from "@/store";

const props = defineProps({
  userId: {
    type: String,
    default: "",
    required: true,
  },
  deptId: {
    type: String,
    default: "",
  },
});

const store = useMyXmateStore();
const reportType = computed(() => store.noticeBoardPublicParam.reportType);
const orgId = computed(() => getUserInfo().orgId);
const abilityStandardScore = computed(
  () => store.noticeBoardPublicParam.abilityStandardScore
);

onMounted(() => {
  nextTick(() => {
    getData();
  });
});

const userReportData = ref([]);
async function getUserReportAction() {
  console.log("getData: ", props.userId);
  const { datas } = await getUserReport(props.deptId, reportType.value as ReportDataType);
  console.log("getUserReport: ", datas);
  const userReport = datas[0];
  if (!userReport) {
    return;
  }

  const { salesAbilityPassCount, salesAbilityNotPassCount, unDetermineNum } = userReport;
  userReportData.value = [
    {
      name: "已达成",
      value: salesAbilityPassCount || 0,
      type: "completed",
    },
    {
      name: "未达成",
      value: salesAbilityNotPassCount || 0,
      type: "uncompleted",
    },
    {
      name: "结果未评估",
      value: unDetermineNum || 0,
      type: "unknown",
    },
  ];
  console.log("userReport: ", userReportData.value);
}

const source = computed(() => {
  return (
    assessmentData.value.reduce((acc, cur) => {
      console.log("reduce : ", cur.value);
      return acc + Number(cur.value);
    }, 0) / assessmentData.value.length
  );
});
const assessmentData = ref([]);
async function getUserAssessmentAction() {
  let params = {
    orgId: orgId.value,
    userId: props.userId,
    reportType: reportType.value,
    dataType: ReportDataType.ABILITY,
  } as UserAssessmentParams;
  const { datas: userAssessment } = await getUserAssessment(params);
  assessmentData.value = userAssessment.map((v: any) => {
    return {
      name: v.assessmentName,
      value: Number(v.assessmentValue).toFixed(1),
    };
  });
  console.log("userAssessment: ", userAssessment);
}

function getData() {
  getUserReportAction();
  getUserAssessmentAction();
}
</script>

<style scoped lang="less"></style>
